<template>
 <div class="header" style="background-color:#ffffff">
 	<div class="aution_content">


   <van-nav-bar
	  title="企业认证"
	  left-arrow
	  @click-left="onClickLeft"
	  />

    <van-cell-group >
      <van-field style="width: 89%;
    border:1px solid #999999;
    margin-left: 5vw;margin-top:2vh;border-radius: 5px;"
        v-model="en_name"
        readonly
        placeholder="请选择您所在的机构名称"
        @click="show_g_type = true"
      />
      <van-popup v-model="show_g_type" position="bottom">
        <van-picker
          show-toolbar
          :columns = "en_arr"
          @cancel="show_g_type = false"
          @confirm="onpConfirm_g_type"
        />
      </van-popup>



 	   <p>
       <van-cell-group style="width: 89%;border:0;margin-left: 5vw;">
         <van-field v-model="enter" placeholder="请输入和营业执照一致的企业名称"/>
       </van-cell-group>
 	   </p>
      <p style="margin-left: 4.5vw;color: #333333;font-size: 16px;text-align: left;">企业职能(可多选)</p>
      <p style="display: flex;justify-content: space-around" class="p_btn_content">

        <van-button type="default" size="small" :class="{'sj_cl':sj_v=='0'}" @click="click_sj">垃圾收集</van-button>
        <van-button type="default" size="small" :class="{'ys_cl':ys_v=='1'}" @click="click_ys">垃圾运输</van-button>
        <van-button type="default" size="small" :class="{'cl_cl':cj_v=='2'}" @click="click_cl">垃圾处理</van-button>

      </p>

 	    <p style="margin-left: 4.5vw;color: #333333;font-size: 16px;text-align: left;">上传企业证件</p>





	  <div class="uploader_img">
	  	 <van-uploader
		  v-model="busLice"
		  multiple
		  :max-count="1"
      :after-read="afterReadbusLice"
      class="cus_pic1"
    	/>

	    <van-uploader
		  v-model="openingPermit"
		  multiple
		  :max-count="1"
      :after-read="afterReadOpeningPermit"
      class="cus_pic2"
	    />
	  </div>


	  <div class="uploader_img">
	  	 <van-uploader
		  v-model="idPositive"
		  multiple
		  :max-count="1"
      :after-read="afterReadIdPositive"
      class="cus_pic3"
    	/>

	    <van-uploader
		  v-model="idReverse"
		  multiple
		  :max-count="1"
      :after-read="afterReadIdReverse"
      class="cus_pic4"
	    />
	  </div>



	  <div class="uploader_img">
	  	 <van-uploader
		  v-model="invoice"
		  multiple
		  :max-count="1"
      :after-read="afterReadInvoice"
      class="cus_pic5"
    	/>

	    <van-uploader
		  v-model="seal"
		  multiple
		  :max-count="1"
      :after-read="afterReadSeal"
      class="cus_pic6"
	    />

	  </div>

	   <p class="data_picker_color">
	      	注：认证成功后不可修改
	      </p>
        <div style="height:51px;"></div>
	     <van-button
	        	type="primary"
	        	size="large"
            @click="sub_info"
	        	style="background: #4C9FFD;
                position: fixed;
	        	bottom: 0;
                left:0;
	        	border:1px solid #4C9FFD;width: 100%;">
	        	提交认证
	    </van-button>
	  </van-cell-group>


	 </div>
	</div>

</template>
<script>


export default {
	data(){
		return{
        dis_disabled:true,
        busLiceUrl:'',
        openingPermitUrl:'',
        idPositiveUrl:'',
        idReverseUrl:'',
        invoiceUrl:'',
        sealUrl:'',
        busLice:[],
        openingPermit:[],
        idPositive:[],
        idReverse:[],
        invoice:[],
        seal:[],
        enter:'',
        sj_v:'',
        ys_v:'',
        cj_v:'',
        show_g_type:false,
        en_arr:[],
        user:'',
        d_value:'',
        en_name:'',
        en_id:''



		}
	},
    mounted:function(){
        this.d_value = this.$route.query.d_value;
        let local_user = localStorage.getItem('user');
        if(local_user != undefined && local_user != "undefined"){
            let user = JSON.parse(local_user);
            this.user = user;
        }
        this.get_enter_prises();
    },
	methods: {
      onpConfirm_g_type(picker,index){
          this.en_name = picker.text;
          this.en_id = picker.en_id;
          this.show_g_type= false;
      },
      get_enter_prises(){
          const that = this;
          let p = "villageId="+that.user.villageId+"&d_value="+that.d_value;
          console.log(p);
          that.$sendRequest('/v2/get_enter_prises',p).then(function(res){
              console.log(res.data);
              var enterprises = res.data.result.enterprises;
              for(var i = 0;i<enterprises.length;i++){
                  var obj = {};
                  obj.text=enterprises[i].en_name;
                  obj.en_id = enterprises[i].en_id;
                  that.en_arr.push(obj);
              }


          })
      },
      sub_info(){

          if(this.enter == ''){
              this.$toast("请输入和营业执照一致的企业名称");
              return false;
          }
          if(this.sj_v == '' && this.ys_v =='' && this.cj_v == ''){
              this.$toast("请至少选择一个职能");
              return false;
          }
          let functions = "";
          if(this.sj_v !=''){
              functions=this.sj_v;
          }
          if(this.ys_v !=''){
              functions = functions+","+this.ys_v;
          }
          if(this.cj_v !=''){
              functions = functions+","+this.cj_v;
          }
          if(functions.substring(0,1) ==','){
              functions =  functions.substring(1,functions.length);
          }


          if(this.busLiceUrl == ''){
              this.$toast("请上传营业执照副本");
              return false;
          }
          if(this.openingPermitUrl == ''){
              this.$toast("请上传开户许可证");
              return false;
          }
          if(this.idPositiveUrl == ''){
              this.$toast("请上传法人身份证正面");
              return false;
          }
          if(this.idReverseUrl == ''){
              this.$toast("请上传法人身份证反面");
              return false;
          }
          if(this.invoiceUrl == ''){
              this.$toast("请上传开票资料");
              return false;
          }
          if(this.sealUrl == ''){
              this.$toast("请上传开票资料");
              return false;
          }



          let user = JSON.parse(localStorage.getItem('user'));
          console.log(user);
          let p = "enId="+this.en_id+"&userId="+user.userId+"&enter_name="+this.enter+"&functions="+functions+"&busLiceUrl="+this.busLiceUrl+"&openingPermitUrl="+this.openingPermitUrl
              +"&idPositiveUrl="+this.idPositiveUrl+"&idReverseUrl="+this.idReverseUrl+"&invoiceUrl="+this.invoiceUrl+"&sealUrl="+this.sealUrl;
          console.log(p);
          const that = this;
          that.$sendRequest('/v2/unit_authentication',p).then(function(res){
              console.log(res.data);
              if(res.data.code==0){
                  that.$toast("提交成功");
                  that.$router.push({
                      path: '/myself'
                  })
              }
          })
      },
      click_sj(){
          let v = this.sj_v;
          if(v == ''){
              v = '0';
          }else{
              v=''
          }
          this.sj_v = v;
      },
      click_ys(){
          let v = this.ys_v;
          if(v == ''){
              v = '1';
          }else{
              v=''
          }
          this.ys_v = v;
      },
      click_cl(){
          let v = this.cj_v;
          if(v == ''){
              v = '2';
          }else{
              v=''
          }
          this.cj_v = v;
      },

      afterReadbusLice(file){
          const that = this;
          let formData = new FormData();
          formData.append("fileName",file.file);
          that.$sendFileRequest('/comm/upload',formData).then(function(res){
              console.log(res);
              if(res.data.code ==0){
                  that.busLiceUrl = res.data.result.relativeFilePath;
              }
          })
      },
      afterReadOpeningPermit(file){
          const that = this;
          let formData = new FormData();
          formData.append("fileName",file.file);
          that.$sendFileRequest('/comm/upload',formData).then(function(res){
              console.log(res);
              if(res.data.code ==0){
                  that.openingPermitUrl = res.data.result.relativeFilePath;
              }
          })
      },
      afterReadIdPositive(file){
          const that = this;
          let formData = new FormData();
          formData.append("fileName",file.file);
          that.$sendFileRequest('/comm/upload',formData).then(function(res){
              console.log(res);
              if(res.data.code ==0){
                  that.idPositiveUrl = res.data.result.relativeFilePath;
              }
          })
      },
      afterReadIdReverse(file){
          const that = this;
          let formData = new FormData();
          formData.append("fileName",file.file);
          that.$sendFileRequest('/comm/upload',formData).then(function(res){
              console.log(res);
              if(res.data.code ==0){
                  that.idReverseUrl = res.data.result.relativeFilePath;
              }
          })
      },
      afterReadInvoice(file){
          const that = this;
          let formData = new FormData();
          formData.append("fileName",file.file);
          that.$sendFileRequest('/comm/upload',formData).then(function(res){
              console.log(res);
              if(res.data.code ==0){
                  that.invoiceUrl = res.data.result.relativeFilePath;
              }
          })
      },
      afterReadSeal(file){
          const that = this;
          let formData = new FormData();
          formData.append("fileName",file.file);
          that.$sendFileRequest('/comm/upload',formData).then(function(res){
              console.log(res);
              if(res.data.code ==0){
                  that.sealUrl = res.data.result.relativeFilePath;
              }
          })
      },

	    onClickLeft() {
          this.$router.back(-1);
	    },



  }
}
</script>
<style scoped="scoped">


	.aniu_collect{
		display: flex;
		justify-content: space-around;
		text-align: center;
	}
  .sj_cl{
    background: #4C9FFD;
    color: #ffffff;
  }
  .ys_cl{
    background: #4C9FFD;
    color: #ffffff;
  }
  .cl_cl{
    background: #4C9FFD;
    color: #ffffff;
  }
  .p_btn_content  >>> .van-button--small{
    min-width: 90px;
    height: 35px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 35px;
  }

	.aniu_collect p span:nth-child(2){
		font-size: 12px;
	}
	.uploader_img >>> .van-uploader__upload{
		margin:6px 8px !important;
	}
	.data_picker_color{
		color: #FF4242 !important;
	    font-size: 12px !important;
	    text-align: left;
	    margin-top: 1vh !important;
	    margin-left: 19px;

	}
	.uploader_img{
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
		margin: 12px;
	}
	.cus_pic1>>>.van-uploader__upload:nth-child(1){
		background: url(../../assets/yingyezhizhao@2x.png) no-repeat center center;
	    background-size: cover;
	}
  .cus_pic2>>>.van-uploader__upload:nth-child(1){
    background: url(../../assets/kaihuxukezheng@2x.png) no-repeat center center;
    background-size: cover;
  }
  .cus_pic3>>>.van-uploader__upload:nth-child(1){
    background: url(../../assets/faren_zheng@2x.png) no-repeat center center;
    background-size: cover;
  }
  .cus_pic4>>>.van-uploader__upload:nth-child(1){
    background: url(../../assets/faren_fan@2x.png) no-repeat center center;
    background-size: cover;
  }
  .cus_pic5>>>.van-uploader__upload:nth-child(1){
    background: url(../../assets/kaipiaoziliao@2x.png) no-repeat center center;
    background-size: cover;
  }
  .cus_pic6>>>.van-uploader__upload:nth-child(1){
    background: url(../../assets/dianziyinzhang@2x.png) no-repeat center center;
    background-size: cover;
  }


	.uploader_img >>> .van-icon-plus{
		display: none;
	}
	.uploader_img >>> .van-image{
		width: 100%;
	}


	.uploader_img>>>.van-uploader__upload:nth-child(2){
		background: url(../../assets/fan.png) no-repeat center center;
		background-size: cover;
	}

	.uploader_img >>>.van-uploader{
		width: 50%;
	}
	.uploader_img>>>.van-uploader__upload{
		width: 100%;
	}
  .header >>> .van-icon{
  	color: #000000;
  }
  .header >>> .van-nav-bar__title{
  	color: #2c3e50;
  }
  .header img{
  	width: 95%;
  }
  .changeImg{
  	display: flex;
  	margin-top: 8vh;
  	justify-content: space-around;
  	margin: 24px;

  }
  .changeImg img{
  	width: 28vw;
    height: 19vh;
  }
    .van-hairline--top-bottom::after{
        border: 0 solid #ffffff;
    }

    .header >>> .van-field{
        border: 1px solid rgb(153, 153, 153);
        border-radius: 5px;
    }
</style>
